<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div style="margin-bottom: 10px;">
    用户名: <input id="userName" type="text"/>
    <button onclick="openService()">连接</button>
</div>
<div>
    请输入: <input id="content" type="text"/>
    <button onclick="sendMsg()">发送服务端</button>
    <button onclick="sendSysMsg()">所有客户端</button>
    <button onclick="closeWebsocket()">关闭</button>
</div>
<ul id="msgList"></ul>
</body>
<script>
    // 参考: https://developer.mozilla.org/zh-CN/docs/Web/API/WebSocket
    let socket = null;

    /**
     * 连接到服务端
     */
    function openService(){
        let userName = document.querySelector('#userName').value;
        // new WebSocket 新建 websocket 连接。
        socket = new WebSocket('ws://localhost:8889/websocket/' + userName + "?name=zhangsan&age=12");

        /**
         * 指定连接成功后的回调。onopen 监听 t 连接打开事件。
         *
         * @param event
         */
        socket.onopen = function (event) {
            console.log("建立连接成功")
        }

        /**
         * 收到服务器的消息时的回调。onmessage 有消息时触发。
         *
         * @param ev
         */
        socket.onmessage = function (ev) {
            console.log("收到服务器消息: " + JSON.stringify(ev))
            let ul = document.querySelector('#msgList');
            let li = document.createElement('li');
            li.innerText = ev.data
            ul.appendChild(li)
        }

        /**
         * 指定连接关闭后的回调。onclose 连接关闭t时触发。
         *
         * @param event
         */
        socket.onclose = function (event) {
            console.log("连接关闭")
        }

    }

    /**
     * 发送消息给服务器
     */
    function sendMsg() {
        let content = document.querySelector('#content');
        socket.send(content.value) // 使用websocket发送消息到服务器
    }

    /**
     * 发送系统消息（所有用户）
     */
    function sendSysMsg(){
        // 1、创建一个 xhr 的对象
        let xhr = new XMLHttpRequest()
        // 2、调用 xhr 中的 open() 函数,创建一个Ajax的请求
        xhr.open('GET', 'http://localhost:8889/ws?oper=sysi')
        // 3、调用 xhr 的 send 函数，发起请求
        xhr.send()
        //4、监听 onreadystatechange 事件
        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4 && xhr.status === 200) {  //固定写法
                // 数据获取成功，获取服务器响应的数据
                console.log(xhr.responseText)
            }
        }
    }

    /**
     * 手动关闭 websocket
     */
    function closeWebsocket() {
        socket.close()
    }
</script>
</html>